<template>
	<view class="container">
		<!-- 自定义顶部栏（替代原生导航栏） -->
		<view class="custom-nav-bar">
			<view class="title-container">
				<text class="title">自主绘画</text>
				<text class="subtitle">智引未来</text>
			</view>
		</view>


		<!-- 提示文字 -->
		<view class="tip">
			<u-icon name="warning" size="32" color="#f9ae3d" style="margin-right: 10rpx;"></u-icon>
			<text>请确保已完成前期准备，以便提高报告的精准性</text>
		</view>

		<!-- 上传区域 - 修改为可显示上传的图片 -->
		<view class="upload-area" @click="handleUpload">
			<image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-image"></image>
			<template v-else>
				<u-icon name="plus" size="40" color="#999"></u-icon>
				<text class="upload-text">请上传作品</text>
			</template>
		</view>

		<!-- 分析按钮 -->
		<view class="btn-container">
			<u-button type="primary" shape="circle" @click="handleAnalyze" :disabled="!imageUrl">
				立即分析
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				aiUrl: '',
				usedTime: '',
				query: `你是一位优秀的心理专家，这是一个小孩子自己画的画，请你根据这个画画作品给我一个对这个小孩子的心理评价和对应的情绪分数，要给予他积极的情绪反馈，你需要返回给我一个["72","31","56","66","42","83"]这样的数组，这几个数据是对['高兴','充实','伤心','孤独','迷茫','纠结']这几个情绪的评分，总分一百分，然后在给我对这个女孩的情绪评价，例如："这张画看起来充满童真和欢乐，她可能在此时节心情愉悦，因为画面具有新生命、希望和追求。"`,
			}
		},
		onLoad() {
			// 监听页面加载，检查是否有从page1返回的图片路径
			const pages = getCurrentPages();
			if (pages.length > 1) {
				const prevPage = pages[pages.length - 2];
				this.imageUrl = prevPage.$vm.imageUrl || '';
				this.aiUrl = prevPage.$vm.aiUrl || '';
				this.usedTime = prevPage.$vm.usedTime || null;
			}
		},

		methods: {
			handleUpload() {
				uni.navigateTo({
					url: '/pages/psychologyModel/drawingAnalysis/drawing/drawHouse',
					success: (res) => {
						// 这里可以在跳转成功时做一些操作，目前无需特别处理
					}
				});
			},
			handleAnalyze() {
				if (!this.imageUrl) {
					uni.showToast({
						title: '请先上传作品',
						icon: 'none'
					});
					return;
				}

				console.log(this.imageUrl)
				console.log(this.aiUrl)
				console.log(this.usedTime)

				uni.navigateTo({
					url: '/pages/psychologyModel/drawingAnalysis/drawing/drawingResult',
					success: (res) => {
						// 通过 eventChannel 向目标页面传参
						res.eventChannel.emit('result', {
							aiUrl: this.aiUrl,
							usedTime: this.usedTime,
							query: this.query
						});
					}
				});
			},
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.custom-nav-bar {
		padding: 20rpx 30rpx;
		background-color: rgb(248, 248, 248);
		color: white;
		text-align: center;
		padding-top: var(--status-bar-height);
		display: flex;
		align-items: center;
		position: relative;
	}

	.title-container {
		margin-top: -20rpx;
		flex: 1;
		text-align: center;
	}

	.custom-nav-bar .title {
		font-size: 35rpx;
		font-weight: bold;
		display: block;
		color: #000000;
	}

	.custom-nav-bar .subtitle {
		font-size: 25rpx;
		display: block;
		margin-top: 10rpx;
		color: #000000;
	}

	.tip {
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		color: #666;
		font-size: 28rpx;
	}

	.upload-area {
		width: calc(100% - 60rpx);
		margin: 30rpx;
		height: 400rpx;
		border: 2rpx dashed #e4e7ed;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fafafa;
		overflow: hidden;
	}

	.preview-image {
		width: 100%;
		height: 100%;
	}

	.upload-text {
		font-size: 32rpx;
		color: #999;
		margin-top: 20rpx;
	}

	.btn-container {
		margin: 40rpx 30rpx;
		display: flex;
		justify-content: center;
	}

	.u-button {
		width: 80%;
		max-width: 500rpx;
	}

	/* 按钮禁用样式 */
	.u-button[disabled] {
		opacity: 0.6;
	}
</style>